<template>
  <div>
    <Category :disabled="!cutAttrList" />

    <el-card
      v-if="cutAttrList"
      shadow="always"
      :body-style="{ padding: '20px' }"
      :style="{ marginTop: '30px' }"
    >
      <template #header>
        <div>
          <el-button
            type="primary"
            size="default"
            icon="ele-Plus"
            @click="openSaveAttrInfo"
            :disabled="!category3Id"
            >添加属性</el-button
          >
        </div>
      </template>
      <el-table border stripe :data="attrListInfo">
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column label="平台属性" width="180" prop="attrName">
        </el-table-column>
        <el-table-column label="平台属性值列表">
          <template v-slot="{ row }">
            <div>
              <el-tag
                :style="{ marginLeft: '10px' }"
                :type="`${index % 2 === 0 ? 'danger' : ''}`"
                size="small"
                v-for="(attr, index) in row.attrValueList"
                :key="attr.id"
                >{{ attr.valueName }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="{ row }">
            <div>
              <el-button
                type="warning"
                size="default"
                icon="ele-Edit"
                @click="updataAttr(row)"
              ></el-button>
              <el-button
                type="danger"
                size="default"
                icon="ele-Delete"
                @click="deleteAttr(row.id)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card
      v-else
      shadow="always"
      :body-style="{ padding: '20px' }"
      :style="{ marginTop: '20px' }"
    >
      <el-form label-width="80px" :inline="true">
        <el-form-item label="属性名">
          <el-input v-model="attrValueInfo.attrName"></el-input>
        </el-form-item>
        <div>
          <el-button
            type="primary"
            size="default"
            @click="addAttrValue"
            :disabled="!attrValueInfo.attrName"
            >添加属性值</el-button
          >
          <el-button size="default" @click="cutAttrList = true">取消</el-button>
        </div>
        <el-table
          border
          stripe
          :style="{ margin: '20px 0px' }"
          :data="attrValueInfo.attrValueList"
        >
          <el-table-column type="index" width="80" label="序号" />
          <el-table-column label="属性值列表">
            <template v-slot="{ row, $index }">
              <div>
                <el-input
                  ref="editIpt"
                  placeholder="请输入属性值"
                  clearable
                  v-model="row.valueName"
                  width="100px"
                  v-if="row.isEdit"
                  @blur="toShow(row, $index)"
                ></el-input>
                <div @click="toEdit(row)" v-else>{{ row.valueName }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作"> </el-table-column>
        </el-table>
        <el-button
          type="primary"
          size="default"
          @click="save"
          :disabled="
            attrValueInfo.attrName === '' ||
            attrValueInfo.attrValueList.length === 0
          "
          >确定</el-button
        >
        <el-button size="default" @click="cutAttrList = true">取消</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "Attr",
});
</script>

<script setup lang="ts">
import useCategoryStore from "@/stores/category";
import { storeToRefs } from "pinia";
import { nextTick, ref, watch } from "vue";
import {
  reqDeleteAttr,
  reqGetAttrInfoList,
  reqSaveAttrInfo,
  type attrInfoItemType,
  type attrInfoListType,
  type attrValueItemType,
} from "@/api/attr";
import { cloneDeep } from "lodash";

// pinia 三级分类
const categoryStore = useCategoryStore();

// 获取三级列表id
const { category3Id, category2Id, category1Id } = storeToRefs(categoryStore);

// 平台属性列表数据
const attrListInfo = ref<attrInfoListType>([]);

// 获取平台属性值方法
const getAttrInfoList = async () => {
  const re = await reqGetAttrInfoList(
    category3Id.value as number,
    category2Id.value as number,
    category1Id.value as number
  );
  attrListInfo.value = re;
};

// 监听三级id  发送请求获取平台属性数据
watch(category3Id, async () => {
  if (!category3Id.value) {
    attrListInfo.value = [];
    return;
  }
  getAttrInfoList();
});

// 平台属性列表与添加或修改属性框切换标识
const cutAttrList = ref(true);

// 收集平台属性值数据
const attrValueInfo = ref<attrInfoItemType>({
  attrName: "",
  categoryLevel: 3,
  attrValueList: [],
  categoryId: category3Id.value as number,
});

// 属性值输入框dom
const editIpt = ref();

// 点击添加属性值按钮的事件
const addAttrValue = () => {
  // 添加一条数据
  attrValueInfo.value.attrValueList.unshift({
    valueName: "",
    isEdit: true,
  });
  // 输入框自动获取焦点  dom生成需要时间 需要使用nextTick事件
  nextTick(() => {
    editIpt.value.focus();
  });
};

// 属性值框失去焦点事件
const toShow = (row: attrValueItemType, index: number) => {
  // 编辑的数据不能为空
  if (!row.valueName) attrValueInfo.value.attrValueList.splice(index, 1);

  // 编辑的数据不能重复
  // 判断出自身外是否有重复
  const isReuse = attrValueInfo.value.attrValueList.some((item) => {
    if (item === row) return;
    return item.valueName === row.valueName;
  });
  // 如果有就删除
  if (isReuse) attrValueInfo.value.attrValueList.splice(index, 1);

  // 进入查看模式
  row.isEdit = false;
};
// 点击展示数据 进入编辑模式
const toEdit = (row: attrValueItemType) => {
  row.isEdit = true;
  // 获取焦点
  nextTick(() => {
    editIpt.value.focus();
  });
};

// 点击修改属性按钮
const updataAttr = (row: attrInfoItemType) => {
  // 再次获取三级分类id
  attrValueInfo.value.categoryId = category3Id.value as number;
  // 打开修改框
  cutAttrList.value = false;
  // 属性值回填  防止取消修改后也导致数据修改 需要拷贝数据  因为里面的数据是引用数据类型所以使用深拷贝  第三方lodash  cloneDeep
  attrValueInfo.value = cloneDeep(row);
};

// 点击确认按钮提交数据 新增或者修改数据
const save = async () => {
  // 将收集到的数据进行发送
  console.log(attrValueInfo.value);

  await reqSaveAttrInfo(attrValueInfo.value);

  // 关闭添加或修改框
  cutAttrList.value = true;

  // 重新请求数据
  getAttrInfoList();
};

// 点击添加属性按钮
const openSaveAttrInfo = () => {
  // 打开对话框
  cutAttrList.value = false;
  // 清空残留数据
  attrValueInfo.value = {
    attrName: "",
    categoryLevel: 3,
    attrValueList: [],
    categoryId: category3Id.value as number,
  };
  // 再次获取三级分类id
  attrValueInfo.value.categoryId = category3Id.value as number;
};

// 点击删除按钮
const deleteAttr = async (id: number) => {
  // 发送删除请求
  await reqDeleteAttr(id);
  // 成功提示
  ElMessage.success("删除成功！");
  // 重新获取数据
  getAttrInfoList();
};
</script>

<style scoped lang="scss"></style>
